<template>
  <view>
    <view>
      <tn-nav-bar alpha backTitle=""></tn-nav-bar>
      <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      </view>
    </view>
    <view class="instruction-container">
      <view class="instruction-header">
        <view class="instruction-title">使用说明</view>
        <view class="instruction-link" @click="goInstruction">水泵更换说明 <text class="tn-icon-right"></text></view>
      </view>
      <view class="instruction-desc">点击图标了解您的机器</view>
      <view class="instruction-ellipse">

        <view class="u-f-ac" style="width: 200rpx;padding-left: 110rpx;">
          

          <view  style="position: absolute;top: 120rpx;right: 90rpx;" class="   u-f-ajc" :class="{'sel': icon=='wang'}"  @click="setIcon(item)">
            <image class="ellipse-icon" style="width: 70rpx;height: 70rpx;" v-if="icon!='wang'" :src="'/static/image/icon2/wang.png'" mode="widthFix" />
            <image class="ellipse-icon" style="width: 70rpx;height: 70rpx;" v-else :src="'/static/image/icon2/wanga.png'" mode="widthFix" />
          </view>



          <view class=" item  u-f-ajc" :class="{'sel': icon==item.icon}"  v-for="(item,index) in list" @click="setIcon(item)">
            <image class="ellipse-icon" v-if="icon!=item.icon" :src="'/static/image/icon2/' +item.icon +'.png'" mode="widthFix" />
            <image class="ellipse-icon" v-else :src="'/static/image/icon2/' +item.iconA +'.png'" mode="widthFix" />
          </view>
        </view>
        <view v-if="!easy" class="u-f-ac" style="width: 200rpx;margin-top: 70rpx;padding-left: 30rpx;">


          <view class=" item  u-f-ajc" :class="{'sel': icon==item.icon}"  v-for="(item,index) in list2" @click="setIcon(item)">
            <image class="ellipse-icon" v-if="icon!=item.icon" :src="'/static/image/icon2/' +item.icon +'.png'" mode="widthFix" />
            <image class="ellipse-icon" v-else :src="'/static/image/icon2/' +item.iconA +'.png'" mode="widthFix" />
          </view>

        </view>

        <view v-if="easy" class="u-f-ac" style="width: 200rpx;margin-top: 70rpx;padding-left: 120rpx;">


          <view class=" item  u-f-ajc" :class="{'sel': icon==item.icon}"  v-for="(item,index) in list2" @click="setIcon(item)">
            <image class="ellipse-icon" v-if="icon!=item.icon" :src="'/static/image/icon2/' +item.icon +'.png'" mode="widthFix" />
            <image class="ellipse-icon" v-else :src="'/static/image/icon2/' +item.iconA +'.png'" mode="widthFix" />
          </view>

    </view>
        <view class="u-f-ac u-f-ajsb" style="width: 430rpx;margin-top: 40rpx;padding-left: 120rpx;">
   

            
          <view class=" item  u-f-ajc" :class="{'sel': icon==item.icon}"  v-for="(item,index) in list3" @click="setIcon(item)">
            <image class="ellipse-icon" v-if="icon!=item.icon" :src="'/static/image/icon2/' +item.icon +'.png'" mode="widthFix" />
            <image class="ellipse-icon" v-else :src="'/static/image/icon2/' +item.iconA +'.png'" mode="widthFix" />
          </view>
        </view>
      </view>
      <view class="instruction-btn-outline">
        <image :src="'/static/image/icon2/'+icon+'.png'" class="btn-outline-icon" />

        <text>{{info}}</text>
      </view>
      <view v-if="type!='wifi'" class="instruction-link2" @click="changeEasy">{{easy ? ' 切换到标准版' : '切换到简易版'}} <text class="tn-icon-right"></text></view>
      <view  v-if="type!='wifi'" class="instruction-btn-main" @click="addDevice">
        <text class="plus">＋</text> 添加设备
      </view>
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      easy: false,
      list: [
        {
          icon: 'wendu',
          iconA: 'wendua',
          name: '水位指示表示',
        },
        {
          icon: 'shuizhi',
          iconA: 'shuizhia',
          name: '水质检测标志',
        },
        {
          icon: 'dian',
          iconA: 'diana',
          name: '电量指示',
        },
      ],
      list2: [
        {
          icon: 'dan',
          iconA: 'dana',
          name: '靠近自动模式',
        },
        {
          icon: 'shi',
          iconA: 'shia',
          name: '定时模式',
        },
        {
          icon: 'wu',
          iconA: 'wua',
          name: '常开模式',
        },
        {
          icon: 'mao',
          iconA: 'maoa',
          name: '不打扰模式',
        },
        {
          icon: 'uv',
          iconA: 'uva',
          name: 'UV消毒指示',
        },
        
        
      ],
      list3: [
        {
          icon: 'shuidi',
          iconA: 'shuidia',
          name: '水位指示',
        },
        {
          icon: 'kaiguan',
          iconA: 'kaiguana',
          name: '开关键',
        },
      
      ],
      icon: 'shuizhi',
      info: '水质检测标志',
      type: ''
    }
  },
  methods: {
    changeEasy() { 
      this.easy = !this.easy
   
      if (this.easy) {
        this.list2 = [

          {
            icon: 'shi',
            iconA: 'shia',
            name: '定时模式',
          },
          {
            icon: 'wu',
            iconA: 'wua',
            name: '常开模式',
          },
          {
            icon: 'mao',
            iconA: 'maoa',
            name: '不打扰模式',
          },

        ]
      } else { 
       this.list2= [
        {
          icon: 'dan',
          iconA: 'dana',
          name: '靠近自动模式',
        },
        {
          icon: 'shi',
          iconA: 'shia',
          name: '定时模式',
        },
        {
          icon: 'wu',
          iconA: 'wua',
          name: '常开模式',
        },
        {
          icon: 'mao',
          iconA: 'maoa',
          name: '不打扰模式',
        },
        {
          icon: 'uv',
          iconA: 'uva',
          name: 'UV消毒指示',
        },
        
        
        ]
      
      }
    },
    setIcon(item) {
      this.icon = item.icon
      this.info=item.name
    },
    goInstruction() {
      uni.navigateTo({
        url: '/pages/index/describe'
      })
    },
    addDevice() {
      uni.redirectTo({
        url: '/pages/register/index'
      })
    }
  },
  onLoad(options) {
    this.type = options.type || ''
  }
}
</script>

<style scoped>
.item {
  margin-left: 42rpx;
  flex-shrink: 0;
  width: 70rpx;
  height: 70rpx;
}

.sel {
  background-color: #000;
  border-radius: 50%;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instruction-container {
  background: #fff;
  padding: 0 0 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.instruction-header {
  width: 100%;
  padding: 48rpx 0 0 48rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.instruction-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #111;
  margin-bottom: 12rpx;
}

.instruction-link {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 40rpx;
}

.arrow {
  font-size: 28rpx;
  color: #bbb;
}

.instruction-desc {
  margin-top: 50rpx;
  color: #999;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 50rpx;
}

.instruction-ellipse {
  width: 640rpx;
  height: 450rpx;
  padding-top: 80rpx;
  /* padding-left: 110rpx; */
  /* border: 2rpx solid #bbb; */
  background-image: url('/static/image/icon2/xian.png');
  background-size: 100% 100%;
  /* border-radius: 50% / 40%; */
  margin: 0 auto 40rpx auto;
  position: relative;
}

.ellipse-icon {
  width: 54rpx;
  height: 54rpx;

  display: flex;
  align-items: center;
  justify-content: center;
}

.ellipse-icon img,
.ellipse-icon image {
  width: 54rpx;
  height: 54rpx;
}

.ellipse-icon-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.ellipse-icon-bg {
  width: 64rpx;
  height: 64rpx;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ellipse-icon-bg.active {
  background: #000;
}

.ellipse-icon-topleft {
  left: 12%;
  top: 18%;
}

.ellipse-icon-top {
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
}

.ellipse-icon-topright {
  right: 12%;
  top: 18%;
}

.ellipse-icon-left {
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
}

.ellipse-icon-right {
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
}

.ellipse-icon-bottomleft {
  left: 18%;
  bottom: 8%;
}

.ellipse-icon-bottom {
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
}

.ellipse-icon-bottomright {
  right: 18%;
  bottom: 8%;
}

.instruction-btn-outline {
  margin: 40rpx auto 0 auto;
  padding: 0 45rpx;
  height: 70rpx;
  border: 3rpx solid #bbb;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #222;
  background: #fff;
  width: fit-content;
}

.btn-outline-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}

.instruction-link2 {
  color: #888;
  font-size: 28rpx;
  margin: 100rpx 0 20rpx 0;
  text-align: center;
}

.instruction-btn-main {
  width: 90vw;
  max-width: 700rpx;
  height: 88rpx;
  background: #000;
  color: #fff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  margin: 0 auto;
}

.plus {
  font-size: 40rpx;
  margin-right: 16rpx;
}
</style>
